<template>
    <div>
        <!-- 查询组件 -->
        <el-form :inline="true" :model="searchMap" ref="ruleForm" class="demo-form-inline">
            <el-form-item prop='name'>
                <el-input v-model="searchMap.name" placeholder="供应商名称"></el-input>
            </el-form-item>
            <el-form-item prop='linkman' v-if='!isShow'>
                <el-input v-model="searchMap.linkman" placeholder="联系人"></el-input>
            </el-form-item>
            <el-form-item prop='mobile' v-if='!isShow'>
                <el-input v-model="searchMap.mobile" placeholder="联系电话"></el-input>
            </el-form-item>
            <el-form-item>
                <!-- 查询 -->
                <el-button type='primary' icon="el-icon-search" circle @click="inquireSupplier"></el-button>
                <!-- 新增 -->
                <el-button type="info" icon='el-icon-edit-outline' circle @click="addBefore" v-if='!isShow'></el-button>
                <!-- 重置 -->
                <el-button icon='el-icon-refresh' circle @click="resetForm('ruleForm')"></el-button>
            </el-form-item>
        </el-form>

        <!-- 表格组件 -->
        <el-table
            :data="tableData"
            @current-change="clickCurrentRow"
            border
            stripe
            max-height='520'
            style="width: 100%">
            <el-table-column
                fixed
                type='index'
                label="序号"
                width="60">
            </el-table-column>
            <el-table-column
                prop="name"
                label="供应商名称"
                width="240">
            </el-table-column>
            <el-table-column
                prop="linkman"
                label="联系人"
                width="100">
            </el-table-column>
            <el-table-column
                prop="mobile"
                label="联系电话"
                width="180">
            </el-table-column>
            <el-table-column
                prop="remark"
                label="备注"
                min-width="400">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="100"
                v-if='!isShow'>
                <template slot-scope="scope">
                    <!-- scope.row：当前行的会员的所有信息 -->
                    <el-button @click="editBefore(scope.row)" type="success" size="small" icon="el-icon-edit" circle></el-button>
                    <el-button @click="deleteSupplier(scope.row.id)" type="danger" size="small" icon="el-icon-delete" circle></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            :layout="isShow?'prev, pager, next ':'total, sizes, prev, pager, next, jumper'"
            :total="total">
        </el-pagination>

        <!-- 新增、编辑弹窗 -->
        <el-dialog :title="supId?'编辑供应商':'新增供应商'" :visible.sync="dialogFormVisible" width='610px'>
            <el-form :model="supplierForm" ref='supplierform' :rules="rules" status-icon>
                <el-form-item prop='name' label="供应商名称" :label-width="formLabelWidth" style='width:500px'>
                    <el-input v-model="supplierForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop='linkman' label="联系人名称" :label-width="formLabelWidth" style='width:500px'>
                    <el-input v-model="supplierForm.linkman" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop='mobile' label="联系人电话" :label-width="formLabelWidth" style='width:500px'>
                    <el-input v-model="supplierForm.mobile" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop='remark' label="备注" :label-width="formLabelWidth" style='width:500px'>
                    <el-input v-model="supplierForm.remark" type="textarea" :autosize="{ minRows: 5, maxRows: 8}" placeholder="请输入内容" resize='none'></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible=false">取消</el-button>
                <el-button type="primary" @click="supId?editSupplier():addSupplier()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    /* 接收从父组件goods传递过来的数据：当传递过来的是布尔值时，要用对象的形式接收而不是数组形式 */
    props:{
        isShow:Boolean
    },
    data(){
        return{
            /* 供应商列表数据 */
            tableData:[],
            /* 当前页、条数、总条数、查询条件 */
            currentPage:1,
            pageSize:10,
            total:0,
            searchMap:{
                name:'',
                linkman:'',
                mobile:''
            },
            /* 供应商填写表单 */
            supId:null,
            supplierForm:{
                name:'',
                linkman:'',
                mobile:'',
                remark:''
            },
            dialogFormVisible:false,
            formLabelWidth:'140px',
            /* 正则校验 */
            rules:{
                name: [
                    { required: true, message: '供应商名称不能为空', trigger: 'blur' }
                ],
                linkman: [
                    { required: true, message: '联系人不能为空', trigger: 'blur' }
                ],
                mobile: [
                    { required: true, message: '电话号码不能为空', trigger: 'blur' }
                ]
            }
        }
    },
    methods:{
        /* 1.获取供应商列表数据：默认第一页10条数据 */
        async getSearch(){
            let {data} = await this.$request({
                url:`supplier/list/search/${this.currentPage}/${this.pageSize}`,
                data:this.searchMap
            })
            this.tableData = data.data.rows;
            this.total = data.data.total;
        },
        /* 2.编辑供应商前处理 */
        async editBefore(rows){
            /* 打开弹出框，根据id发送请求获取该用户信息，并渲染到表单上 */
            this.dialogFormVisible = true;
            this.$nextTick(() => {
                this.$refs["supplierform"].clearValidate();
            });
            this.supId = rows.id;
            const {data} = await this.$request({
                url:`/supplier/${rows.id}`,
                method:'get'
            })
            this.supplierForm = data.data;
        },
        /* 3.新增供应商前处理 */
        addBefore(){
            this.supId = null;
            this.dialogFormVisible = true;
            /* 清空原先表单所有数据和检验结果 */
            this.supplierForm = {
                name:'',
                linkman:'',
                mobile:'',
                remark:''
            }
            this.$nextTick(() => {
                this.$refs["supplierform"].resetFields();
            });
        },
        /* 4.删除供应商 */
        async deleteSupplier(id){
            try{
                let result =  await this.$confirm('此操作将永久该供应商信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                })
                /* 发送请求 */
                const {data} = await this.$request({
                    url:`/supplier/${id}`,
                    method:'delete'
                })
                /* 根据返回信息进行对应操作 */
                if(data.flag){
                    this.$notify({
                        title: '成功',
                        message: '删除成功！',
                        type: 'success'
                    });
                    /* 删除成功后重新发送请求渲染列表 */
                    this.getSearch();
                }else{
                    this.$notify({
                        title: '失败',
                        message: '删除供应商失败，请稍后重新删除！',
                        type: 'error'
                    });
                }
            }catch(err){
                this.$notify.info({
                    title: '取消',
                    message: '已取消删除！'
                });
            }
        },
        /* 5.查询供应商 */
        inquireSupplier(){
            this.getSearch()
        },
        /* 6.重置查询框 */
        resetForm(formName){
            console.log('重置查询框');
            this.$refs[formName].resetFields();
        },
        /* 7.更改每页条数 */
        handleSizeChange(pagesize) {
            this.pageSize = pagesize
            /* 重新发送请求渲染 */
            this.getSearch();
        },
        /* 8.更改当前页 */
        handleCurrentChange(currentpage) {
            this.currentPage = currentpage
            /* 重新发送请求渲染 */
            this.getSearch();
        },
        /* 9.新增供应商 */
        addSupplier(){
            /* 正则校验 */
            this.$refs['supplierform'].validate(async (valid) => {
                /* 正则校验通过则发送添加ajax请求 */
                if(valid){
                    const {data} = await this.$request({
                        url:`/supplier`,
                        method:'post',
                        data:this.supplierForm
                    })
                    /* 根据返回信息提示是否添加成功 */
                    if(data.flag){
                        this.$notify({
                            title: '成功',
                            message: '添加供应商成功！',
                            type: 'success'
                        });
                        /* 添加成功则清空表单，重新发送请求渲染列表为最新的信息 */
                        this.$refs['supplierform'].resetFields();
                        this.getSearch();
                    }else{
                        this.$notify({
                            title: '失败',
                            message: '添加供应商失败，请稍后重新添加！',
                            type: 'error'
                        });
                        return;
                    }
                /* 不通过则提示修改内容 */
                }else{
                    this.$notify({
                        title: '失败',
                        message: '必填项未填写或者填写内容不符合要求！',
                        type: 'error'
                    });
                    return;
                }
                this.dialogFormVisible = false;
            });
        },
        /* 10.编辑供应商 */
        editSupplier(){
            this.$refs['supplierform'].validate(async (valid) => {
                /* 正则校验通过则发送修改ajax请求 */
                if(valid){
                    const {data} = await this.$request({
                        url:`/supplier/${this.supId}`,
                        method:'put',
                        data:this.supplierForm
                    })
                    /* 根据返回信息提示是否修改成功 */
                    if(data.flag){
                        this.$notify({
                            title: '成功',
                            message: '修改供应商成功！',
                            type: 'success'
                        });
                        /* 修改成功则清空表单，重新发送请求渲染列表为最新的信息 */
                        this.$refs['supplierform'].resetFields();
                        this.getSearch();
                    }else{
                        this.$notify({
                            title: '失败',
                            message: '修改供应商失败，请稍后重新修改！',
                            type: 'error'
                        });
                        return;
                    }
                /* 不通过则提示修改内容 */
                }else{
                    this.$notify({
                        title: '失败',
                        message: '必填项未填写或者填写内容不符合要求！',
                        type: 'error'
                    });
                    return;
                }
                this.dialogFormVisible = false;
            });
        },
        /* 11.选择供应商：获取到的该行数据发送给父组件goods，即子传父 */
        clickCurrentRow(currentRow){
            // console.log(currentRow);
            this.$emit('option-supplier',currentRow)
        }
    },
    /* 首次请求渲染列表数据 */
    async created(){
        this.getSearch()
    }
}
</script>

<style>

</style>